<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>相对定位和绝对定位</title>
<meta name="author" content="phpstudy.net" />
<meta name="copyright" content="www.phpstudy.net" />
<style>
.h3{
	width: 60%;
	margin: 20px auto;
}
.div0{
	position: relative;
	width: 60%;
	background: lavender;
	margin: 50px auto;
	top: 30px;
	left: 100px;
	border: red 2px solid;
}
.div1{
	height: 120px;
	background: blue;
}
.div2{
	position: absolute;
	height: 120px;
	background: red;
	top: 20px;
	left: 180px;
}
.div3{
	position: relative;
	height: 120px;
	background: yellow;
	top: -20px;
	left: 50px;
}

</style>
</head>
<body>
	<div class="div0">
		<div class="div1">
			第一个盒子
		</div>
		<div class="div2">
			第二个盒子
		</div>
		<div class="div3">
			第三个盒子
		</div>
	</div>
	<div class="h3">
		<h3>父div写position: relative;相对定位，占用正常文档流，保留原有位置的空地，根据属性相对自身原来的位置偏移</h3>
		<h3>子div写position: absolute;绝对定位，脱离文档流，根据属性相对父div定位</h3>
		<br />
		<h3>父div写了relative，相对自身偏移了top:30px;left:100px</h3>
		<h3>第一个盒子没有写定位，正常文档流</h3>
		<h3>第二个盒子写了absolute;相对父div偏移了top: 20px;left: 180px;
			注：子盒子写了absolute，相对父盒子定位，必须是父盒子写了relative，否则子盒子就不相对父盒子定位，而是相对body定位</h3>
		<h3>第三个盒子写了position;相对自身偏移了top: -20px;left: 50px;保留原有位置的空地</h3>
	</div>
</body>
</html>
	